<template>
  <div>
    <el-row :gutter="20">
      <el-col class="catalog-item" :span="8" v-for="catalog in catalogList" :key="catalog.id" @click.native="openRead(catalog.id)">
        <el-card shadow="always">
          <p :title="catalog.catalogName"><i style="margin-right: 5px;color: #409EFF" v-if="catalog.id == catalogId" class="el-icon-place"></i>{{catalog.catalogName}}</p>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination style="text-align: center" hide-on-single-page :current-page="catalogPageInfo.page" :page-size="catalogPageInfo.limit" @current-change="catalogPage" :total="catalogPageInfo.total" layout="prev,pager,next"/>
  </div>
</template>
<script>
export default {
  name: 'CatalogPage',
  data () {
    return {
      catalogList: [],
      catalogPageInfo: {
        page: 1,
        limit: 60,
        total: 0
      }
    }
  },
  props: ['bookId', 'catalogId'],
  methods: {
    openRead (id) {
      this.$emit('catalogClick', id)
    },
    catalogPage (val) {
      this.catalogPageInfo.page = val
      this.getCatalogList()
    },
    getCatalogList () {
      this.catalogPageInfo.bookId = this.bookId
      this.$http.get('api/v1/book/catalog/page', this.catalogPageInfo).then(data => {
        if (data) {
          this.catalogList = [...data.records]
          this.catalogPageInfo.total = data.total
        }
      }).catch(() => {})
    }
  },
  created () {
    this.getCatalogList()
  }
}
</script>

<style scoped lang="scss">
  .catalog-item{
    margin-bottom: 20px;
    cursor: pointer;
  }
</style>
